<template>
  <div class="charts-container">
    <div class="chart-container chart1-container">
      <div class="container">
        <div class="title">
          <span class="title-text">故障系统分布</span>
        </div>
        <CommonChart :option="state.option1" class="chat-content" ref="chartRef1" />
      </div>
    </div>
    <div class="chart-container chart2-container">
      <div class="container">
        <div class="title">
          <span class="title-text">本月计划完成情况</span>
        </div>
        <CommonChart :option="state.option2" class="chat-content" ref="chartRef2" />
      </div>
    </div>
    <div class="chart-container chart3-container">
      <div class="container">
        <div class="title">
          <span class="title-text">当日计划</span>
        </div>
        <CommonChart class="chat-content" :option="state.option3" />
      </div>
    </div>
  </div>
  <!-- <ListModal @register="registerModal" /> -->
</template>
<script setup>
import CommonChart from '/@/components/CommonChart/CommonChart.vue'
import { ref, reactive, onMounted, onUnmounted, nextTick,watch } from 'vue'
import { alovaInstance } from "/@/utils/request.js";
let chartRef1 = ref()
let chartRef2 = ref()
let myChart1 = null
let myChart2 = null
const state = reactive({
  option1: {},
  option2: {},
  option3: {},
  chartData1: {},
  chartData2: {},
  chartData3: {},
  colors: [
    "#549BF1",
    "#B4C9EF",
    "#AA8A6E",
    "#67D470",
    "#f0cdcf",
    "#FFB6C1",
    "#DC143C",
    "#FFF0F5",
    "#DA70D6",
    "#8B008B",
    "#4B0082",
    "#7B68EE",
    "#E6E6FA",
    "#000080",
    "#1E90FF",
    "#00BFFF",
    "#AFEEEE",
    "#008B8B",
    "#7FFFAA",
    "#90EE90",
    "#ADFF2F",
    "#FFFF00",
  ],
  ststusMap: {
    '0': '未处理',
    '1': '已确认',
    '2': '已处理',
    '10': '误报警',
  }
})
const timer = ref(null)
onMounted(() => {
  getData()
  timer.value = setInterval(() => {
    getData()
  }, 30000)
})
onUnmounted(() => {
  if (myChart1) {
    myChart1.dispose()
  }
  if (myChart2) {
    myChart2.dispose()
  }
  if (timer.value) {
    clearInterval(timer.value)
  }
})
const getData = () => {
  getCountFaultSubsystemFb(); // 故障系统分布
  getCountFaultHandleFb(); //故障处理情况分布
  getWarnListGroupDetectDate(); // 故障数量趋势
  nextTick(() => {
    addChartClickEvent()
  })
}
watch([() => state.chartData1,], (newValue, oldValue) => {
  if (JSON.stringify(newValue) !== JSON.stringify(oldValue)) {
    state.option1 = state.chartData1
  }
}, { deep: true })
watch([() => state.chartData2,], (newValue, oldValue) => {
  if (JSON.stringify(newValue) !== JSON.stringify(oldValue)) {
    state.option2 = state.chartData2
  }
}, { deep: true })
watch([() => state.chartData3,], (newValue, oldValue) => {
  if (JSON.stringify(newValue) !== JSON.stringify(oldValue)) {
    state.option3 = state.chartData3
  }
}, { deep: true })

const getLineOption = (data) => {
  return {
    grid: {
      left: "14%",
      top: "8%",
      bottom: "14%",
      right: "6%",
    },
    tooltip: {
      show: true,
      trigger: "axis",
      confine: true,
    },
    xAxis: {
      type: "category",
      data: data.xData,
      axisLine: {
        show: true,
        lineStyle: {
          color: "#4F5A68",
        },
      },
      axisLabel: {
        show: true,
        color: "#5090C0",
      },
      axisTick: {
        show: false,
      },
    },
    yAxis: {
      type: "value",
      show: true,
      axisLine: {
        show: false,
        lineStyle: {
          color: "#3a4d73",
        },
      },
      axisLabel: {
        show: true,
        color: "#5090C0",
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#2B364C",
          type: "dashed",
        },
      },
    },
    series: [
      {
        data: data.yData,
        type: "line",
        cursor: "default",
        smooth: true,
        symbolSize: 8,
        // symbol: 'none',
        symbol: "circle",
        itemStyle: {
          color: data.color,
        },
        areaStyle: {
          opacity: 1,
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: data.color // 0% 处的颜色
            }, {
              offset: 1, color: 'transparent' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          }
        }
      },
    ],
  };
}
const getPieOption = (data, opt) => {
  const legendData = data.map((i, index) => {
    return {
      name: i.name,
      itemStyle: {
        color: i.color || state.colors[index] || '#00BFFF',
      },
    };
  });
  const seriesData = data.map((i, index) => {
    return {
      name: i.name,
      value: i.value,
      itemStyle: {
        color: i.color || state.colors[index] || '#00BFFF',
      },
    };
  });
  return {
    tooltip: {
      trigger: "item",
      confine: true,
    },
    legend: {
      type: "scroll",
      bottom: "1%",
      left: "center",
      itemWidth: 14,
      itemGap: 18,
      textStyle: {
        color: "#A3A7B1",
        lineHeight: 1,
      },
      data: legendData,
      pageTextStyle: {
        color: "#A3A7B1",
      },
    },
    series: [
      {
        name: "本月计划完成情况",
        type: "pie",
        radius: ["40%", "55%"],
        center: ["50%", "45%"],
        avoidLabelOverlap: false,
        label: {
          show: opt?.label?.show || false,
          // formatter: "{b}: {d}%",
          overflow: 'truncate',
          formatter: (p) => {
            return `${p.name}\n${p.percent}%`
          },
          color: "#fff",
          position: 'outside'
        },
        labelLine: {
          show: opt?.labelLine?.show || false,
          lineStyle: {
            color: "#0ed2e8",
          },
        },
        data: seriesData,
      },
      {
        name: "外层环",
        type: "pie",
        radius: ["65%", "67%"],
        center: ["50%", "45%"],
        avoidLabelOverlap: false,
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        data: [
          {
            value: 100,
            name: "外层环",
            tooltip: {
              show: false,
            },
          },
        ],
        itemStyle: {
          color: "#17325D",
        },
      },
    ],
  };
}
const getPieOption1 = (data, opt) => {
  const legendData = data.map((i, index) => {
    return {
      name: i.name,
      itemStyle: {
        color: i.color || state.colors[index] || '#00BFFF',
      },
    };
  });
  const seriesData = data.map((i, index) => {
    return {
      name: i.name,
      value: i.value,
      itemStyle: {
        color: i.color || state.colors[index] || '#00BFFF',
      },
    };
  });
  return {
    tooltip: {
      trigger: "item",
      confine: true,
    },
    legend: {
      type: "scroll",
      bottom: "1%",
      left: "center",
      itemWidth: 14,
      itemGap: 18,
      textStyle: {
        color: "#A3A7B1",
        lineHeight: 1,
      },
      data: legendData,
      pageTextStyle: {
        color: "#A3A7B1",
      },
    },
    series: [
      {
        name: "故障系统",
        type: "pie",
        radius: ["55%", "63%"],
        center: ["50%", "45%"],
        avoidLabelOverlap: false,
        padAngle: 2,
        label: {
          show: opt?.label?.show || false,
          overflow: 'truncate',
          formatter: (p) => {
            return `${p.name}\n${p.percent}%`
          },
          color: "#fff",
          position: 'outside'
        },
        labelLine: {
          show: opt?.labelLine?.show || false,
          lineStyle: {
            color: "#0ed2e8",
          },
        },
        data: seriesData,
      },
      {
        name: "外层环",
        type: "pie",
        radius: ["73%", "75%"],
        center: ["50%", "45%"],
        avoidLabelOverlap: false,
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        data: [
          {
            value: 100,
            name: "外层环",
            tooltip: {
              show: false,
            },
          },
        ],
        itemStyle: {
          color: "#17325D",
        },
      },
      {
        name: "内层环1",
        type: "pie",
        radius: ["40%", "44%"],
        center: ["50%", "45%"],
        avoidLabelOverlap: false,
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        data: [
          {
            value: 100,
            name: "内层环1",
            tooltip: {
              show: false,
            },
          },
        ],
        itemStyle: {
          color: "#29486C",
        },
      },
      {
        name: "内层环2",
        type: "pie",
        radius: ["00%", "40%"],
        center: ["50%", "45%"],
        avoidLabelOverlap: false,
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        data: [
          {
            value: 100,
            name: "内层环2",
            tooltip: {
              show: false,
            },
          },
        ],
        itemStyle: {
          color: "#152B44",
        },
      },
    ],
  };
}
// 故障系统分布
const getCountFaultSubsystemFb = async () => {
  const colors = ['#189CFE', '#894EFE', '#FAA03F', '#B3C8F0',]
  const res = await alovaInstance.Get('/Portal/TYHome.ashx?Method=GetFaultPie')
  if (res && res.data && res.data.length) {
    const pieData = res.data.map((item, index) => {
      return {
        name: item.major,
        value: item.count,
        color: colors[index]
      };
    });
    state.chartData1 = getPieOption1(pieData, {
      labelLine: {
        show: false
      },
      label: {
        show: false
      },
    })
  } else {
    state.chartData1 = getPieOption1([])
  }
}
// 故障处理情况分布
const getCountFaultHandleFb = async () => {
  const colors = ['#FAA03F', '#B3C8F0', '#189CFE', '#894EFE']
  const res = await alovaInstance.Get('/Portal/TYHome.ashx?Method=GetFaultHandlePie')
  if (res && res.data && res.data.length) {
    const pieData = res.data.map((item, index) => {
      return {
        name: item.flag,
        value: item.count,
        color: colors[index]
      };
    });
    state.chartData2 = getPieOption(pieData, {
      labelLine: {
        show: false
      },
      label: {
        show: false
      },
    })
  } else {
    state.chartData2 = getPieOption([])
  }
}
// 故障数量趋势
const getWarnListGroupDetectDate = async () => {
  const res = await alovaInstance.Get('/Portal/TYHome.ashx?Method=GetFaultWave')
  if (res && res.data && res.data.length) {
    const { data } = res
    const xData = data.map(i => {
      return i.mouth
    })
    const yData = data.map(i => {
      return i.count
    })
    state.chartData3 = getLineOption({
      xData: xData,
      yData: yData,
      color: "#12FCD4",
    });
  } else {
    state.chartData3 = getLineOption({
      xData: [],
      yData: [],
      color: "#12FCD4",
    });
  }
}
const addChartClickEvent = () => {
  if (chartRef1.value) {
    myChart1 = chartRef1.value.getEcharts()
    myChart1.on('click', function (p) {
      const params1 = {
        subsystemName: p.name
      }
      openListModal(params1)
    })
  }
  if (chartRef2.value) {
    myChart2 = chartRef2.value.getEcharts()
    myChart2.on('click', function (p) {
      let status = 0
      for (const key in state.ststusMap) {
        const e = state.ststusMap[key];
        if (p.name === e) {
          status = Number(key + '')
        }
      }
      const params2 = {
        status
      }
      openListModal(params2)
    })
  }
}

</script>
<style scoped lang="less">
.charts-container {
  width: 24%;
  height: calc(100% - 90px);
  position: absolute;
  right: 10px;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 500;
  overflow: hidden;
  background-size: 100% 100%;
  padding: 24px 0;
  border-radius: 10px;

  .chart-container {
    height: 32.5%;

    .chat-content {
      height: calc(100% - 54px) !important;
    }

    .title {
      height: 34px;
      font-weight: 700;
      font-size: 16px;
      padding-left: 12px;
      background: url('@/assets/home/title-bg.png') no-repeat;
      background-size: 100% 100%;
      padding-left: 44px;
      line-height: 30px;
      margin-bottom: 12px;
      position: relative;
      font-style: italic;

      .title-text {
        padding-right: 10px;
        background: linear-gradient(to bottom, #afe5ff, #f5fcff);
        -webkit-background-clip: text;
        color: transparent;
      }

      .more {
        position: absolute;
        right: 5px;
        bottom: 0;
        color: #fff;
        font-size: 14px;
      }
    }

    .container {
      height: calc(100% - 2px);
      border-radius: 10px;
      background: linear-gradient(to left, rgba(14, 38, 100, 1), rgba(14, 38, 100, 0.6));
    }
  }
}
</style>
